<template>
  <div>
    <div class="button-group-css">
      <div class="button-group-search-css">
        <el-input
          placeholder="项目"
          style="width: 160px"
          v-model="datas.project"
        ></el-input>
        <el-input
          placeholder="类别"
          style="width: 160px"
          v-model="datas.mode"
        ></el-input>
        <el-input
          placeholder="名称"
          style="width: 160px"
          v-model="datas.name"
        ></el-input>
        <el-input
          placeholder="信息"
          style="width: 160px"
          v-model="datas.msg"
        ></el-input>
        <el-input
          placeholder="备注"
          style="width: 160px"
          v-model="datas.remark"
        ></el-input>
        <el-button @click="dataLoad">搜索</el-button>
      </div>

      <div class="button-group-edit">
        <el-button type="danger" @click="batch_del_func">批量删除</el-button>

        <el-button type="success" @click="open_add_dialog()"> 添加 </el-button>
        <!-- <el-button @click="datas.xlsx_up_dialog = !datas.xlsx_up_dialog">导入</el-button>
        <el-button @click="xlsxDow"> 导出 </el-button> -->
      </div>
    </div>

    <div class="table-div-css">
      <el-table
        :data="datas.tableList"
        stripe
        style="width: 100%"
        show-summary
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="project" label="项目" />
        <el-table-column prop="mode" label="类别" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="msg" label="信息" />
        <el-table-column prop="count" label="数量" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="remark" label="备注" />

        <el-table-column prop="address" label="操作" width="260" fixed="right">
          <template #default="scope">
            <el-button type="primary" @click="open_put_dialog(scope.row)"
              >修改</el-button
            >
            <el-button type="primary" @click="open_show_dialog(scope.row)"
              >查看</el-button
            >
            <el-button type="danger" @click="del_func(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-div-css">
      <el-pagination
        v-model:current-page="datas.page"
        v-model:page-size="datas.pagesize"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="datas.total"
        @size-change="dataLoad"
        @current-change="dataLoad"
      />
    </div>
  </div>

  <el-dialog v-model="datas.dialogVisible" :title="datas.title" width="40%">
    <el-form :model="form">
      <el-form-item label="项目:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.project" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类别:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.mode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="信息:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.msg" autocomplete="off" />
      </el-form-item>

      <el-form-item label="数量:" :label-width="datas.formLabelWidth">
        <el-input-number v-model="form.count" autocomplete="off" />
      </el-form-item>

      <el-form-item label="单价:" :label-width="datas.formLabelWidth">
        <el-input-number
          precision="2"
          v-model="form.price"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="备注:" :label-width="datas.formLabelWidth">
        <el-input
          v-model="form.remark"
          :rows="2"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close_dialog">取消</el-button>

        <el-button
          v-if="datas.title == '添加数据'"
          type="primary"
          @click="add"
          :disabled="shake_obj.add"
          >添加</el-button
        >
        <el-button
          v-if="datas.title == '修改数据信息'"
          type="primary"
          @click="put"
          :disabled="shake_obj.put"
          >修改</el-button
        >
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="datas.show_dialog" :title="'查看数据'" width="40%">
    <el-form :model="form">
      <el-form-item label="项目:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.project" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类别:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.mode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="信息:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.msg" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量:" :label-width="datas.formLabelWidth">
        <el-input-number v-model="form.count" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单价:" :label-width="datas.formLabelWidth">
        <el-input-number
          precision="2"
          v-model="form.price"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="备注:" :label-width="datas.formLabelWidth">
        <el-input
          v-model="form.remark"
          :rows="2"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="datas.xlsx_up_dialog" title="批量上传">
    <el-upload
      drag
      :action="api_ap1_excel_post_link"
      multiple
      :headers="headers"
      :on-success="xlsxSuccess"
      :on-error="xlsxError"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽<em>或点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          请上传指定模板的数据 上传后需要一段时间进行处理
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import {
  api_ap1_list_get,
  api_ap1_list_post,
  api_ap1_list_put,
  api_ap1_list_del,
  api_ap1_excel_post_link,
  api_ap1_excel_down_link,
} from "../../../api/api";
import { useRouter } from "vue-router";
const router = useRouter();
const datas = reactive({
  tableList: [],
  dialogVisible: false,
  show_dialog: false,
  formLabelWidth: "80px",
  title: "",
  page: 1,
  pagesize: 10,
  total: 0,
  select_list: [],
  xlsx_up_dialog: false,
  project: "",
  mode: "",
  name: "",
  msg: "",
  remark: "",
});
const form = reactive({
  project: "",
  mode: "",
  name: "",
  msg: "",
  remark: "",
  count: 0,
  price: 0,
});
//上传文件时附带身份信息
const headers = {
  Authorization: localStorage.getItem("token"),
};

//防抖
const shake_obj = reactive({
  add: false,
  put: false,
});

//选中触发的方法
const handleSelectionChange = (val) => {
  //选中触发的方法
  let L = [];
  for (let index = 0; index < val.length; index++) {
    const element = val[index];
    L.push(element.id);
  }
  datas.select_list = L;
};

const close_dialog = () => {
  //点击弹窗的取消按钮触发的方法
  datas.dialogVisible = false;
  form.username = "";
  form.password = "";
  form.name = "";
  form.phone = "";
  form.level = "";
};

const open_add_dialog = () => {
  //添加添加添加数据的方法
  datas.title = "添加数据";

  form.project = "";
  form.mode = "";
  form.name = "";
  form.msg = "";
  form.remark = "";
  form.count = 0;
  form.price = 0;

  datas.dialogVisible = true;
};

const open_put_dialog = (row) => {
  //点击修改触发的方法

  datas.title = "修改数据信息";

  form.id = row.id;
  form.project = row.project;
  form.mode = row.mode;
  form.name = row.name;
  form.msg = row.msg;
  form.remark = row.remark;
  form.count = row.count;
  form.price = row.price;

  datas.dialogVisible = true;
};
const open_show_dialog = (row) => {
  //点击修改触发的方法

  form.id = row.id;
  form.project = row.project;
  form.mode = row.mode;
  form.name = row.name;
  form.msg = row.msg;
  form.remark = row.remark;
  form.count = row.count;
  form.price = row.price;

  datas.show_dialog = true;
};

const add = () => {
  //向后端提交添加账号数据的方法

  if (shake_obj.add) {
    return;
  }
  shake_obj.add = true;
  setTimeout(() => {
    shake_obj.add = false;
  }, 1000);

  api_ap1_list_post(form).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      dataLoad();
      close_dialog();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const put = () => {
  //向后端提交修改数据的方法

  if (shake_obj.put) {
    return;
  }
  shake_obj.put = true;
  setTimeout(() => {
    shake_obj.put = false;
  }, 1000);

  api_ap1_list_put(form).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      dataLoad();
      close_dialog();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const del_func = (row) => {
  //点击删除按钮触发的方法
  ElMessageBox.confirm(`确定删除?`, "提示", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let dic = {
        id: row.id,
      };
      api_ap1_list_del(dic).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          dataLoad();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {});
};

const batch_del_func = () => {
  //批量删除触发方法
  ElMessageBox.confirm(`确定删除选择内容?`, "提示", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let dic = {
        id: datas.select_list.join(","),
      };
      api_ap1_list_del(dic).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          dataLoad();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {});
};

//上传xlsx成功
const xlsxSuccess = (res) => {
  //批量上传
  if (res.code === 200) {
    ElMessage({
      message: res.msg,
      type: "success",
    });
    dataLoad();
  } else {
    ElMessage.error(res.msg);
  }
};
//上传xlsx失败
const xlsxError = (err) => {};

const xlsxDow = () => {
  //下载xlsx
  let link = api_ap1_excel_down_link + "?";
  let param = ["project", "mode", "name", "msg", "remark"];
  for (const val of param) {
    link += val + "=" + datas[val] + "&";
  }

  link = link + "AUTHORIZATION="+localStorage.getItem("token")

  var a = document.createElement("a");
  a.href = link; // 替换为你想要访问的链接地址
  a.click();

};

const dataLoad = () => {
  //数据加载
  let dic = {
    page: datas.page,
    pagesize: datas.pagesize,
    project: datas.project,
    mode: datas.mode,
    name: datas.name,
    msg: datas.msg,
    remark: datas.remark,
  };
  api_ap1_list_get(dic).then((res) => {
    if (res.data.code == 200) {
      datas.tableList = res.data.data.data;
      datas.total = res.data.data.total;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//初始加载数据
onMounted(() => {
  dataLoad();
});
</script>
<style scoped>
.button-group-css {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.button-group-search-css {
  display: flex;
}

.button-group-search-css > .el-input {
  margin-right: 0.25rem;
}

.button-group-edit {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.table-div-css {
  height: 75vh;
  overflow: auto;
}

.pagination-div-css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
